<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - Gallery</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        :root {
            --primary-bg: #1a1a1a;
            --accent-gold: #d4af37;
            --text-light: #f8f8f8;
            --text-muted: #a0a0a0;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--primary-bg);
            color: var(--text-light);
            overflow-x: hidden;
        }
        
        .gradient-text {
            background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .login-bg {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
            position: relative;
        }
        
        .login-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><radialGradient id="g" cx="50%" cy="50%"><stop offset="0%" stop-color="%23d4af37" stop-opacity="0.1"/><stop offset="100%" stop-color="%23d4af37" stop-opacity="0"/></radialGradient></defs><circle cx="50" cy="50" r="50" fill="url(%23g)"/></svg>') center/cover;
            opacity: 0.3;
            animation: pulse 4s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.3; }
            50% { transform: scale(1.1); opacity: 0.1; }
        }
        
        .form-input {
            transition: all 0.3s ease;
        }
        
        .form-input:focus {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2);
        }
        
        .login-card {
            backdrop-filter: blur(20px);
            background: rgba(26, 26, 26, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .floating-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--accent-gold);
            border-radius: 50%;
            opacity: 0.6;
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
            50% { transform: translateY(-20px) rotate(180deg); opacity: 0.3; }
        }
        
        .password-toggle {
            cursor: pointer;
            transition: color 0.3s ease;
        }
        
        .password-toggle:hover {
            color: var(--accent-gold);
        }
    </style>
</head>
<body>
    <!-- Floating Particles Background -->
    <div class="floating-particles" id="particles"></div>
    
    <!-- Navigation -->
    <nav class="fixed top-0 w-full z-50 bg-black/80 backdrop-blur-md border-b border-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="text-xl font-bold gradient-text">Gallery</a>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-8">
                        <a href="index.html" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">首页</a>
                        <a href="gallery.html" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">照片墙</a>
                        <a href="about.html" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">关于</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Login Section -->
    <section class="min-h-screen flex items-center justify-center login-bg relative pt-16">
        <div class="max-w-md w-full mx-4 relative z-10">
            <!-- Logo and Title -->
            <div class="text-center mb-8">
                <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-4">欢迎回来</h1>
                <p class="text-gray-400 text-lg">登录您的账户，继续您的摄影之旅</p>
            </div>

            <!-- Login Card -->
            <div class="login-card rounded-2xl p-8 shadow-2xl">
                <form id="login-form" class="space-y-6">
                    <!-- Email/Username -->
                    <div>
                        <label for="login-email" class="block text-sm font-medium text-gray-300 mb-2">
                            邮箱或用户名
                        </label>
                        <input type="text" id="login-email" name="email" required
                               class="form-input w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-yellow-500 focus:ring-2 focus:ring-yellow-500/20"
                               placeholder="请输入您的邮箱或用户名">
                    </div>

                    <!-- Password -->
                    <div>
                        <label for="login-password" class="block text-sm font-medium text-gray-300 mb-2">
                            密码
                        </label>
                        <div class="relative">
                            <input type="password" id="login-password" name="password" required
                                   class="form-input w-full px-4 py-3 pr-12 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-yellow-500 focus:ring-2 focus:ring-yellow-500/20"
                                   placeholder="请输入您的密码">
                            <button type="button" class="password-toggle absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                    onclick="togglePassword('login-password')">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <!-- Remember Me -->
                    <div class="flex items-center justify-between">
                        <label class="flex items-center text-sm text-gray-300">
                            <input type="checkbox" id="remember-me" class="mr-2 rounded border-gray-600 text-yellow-500 focus:ring-yellow-500/20">
                            记住我
                        </label>
                        <a href="#" class="text-sm text-yellow-400 hover:text-yellow-300 transition-colors">
                            忘记密码？
                        </a>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit"
                            class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
                        登录
                    </button>
                </form>

                <!-- Divider -->
                <div class="mt-8 flex items-center">
                    <div class="flex-1 border-t border-gray-700"></div>
                    <span class="px-4 text-sm text-gray-400">或者</span>
                    <div class="flex-1 border-t border-gray-700"></div>
                </div>

                <!-- Register Link -->
                <div class="mt-8 text-center">
                    <p class="text-gray-400 text-sm">
                        还没有账户？
                        <a href="register.html" class="text-yellow-400 hover:text-yellow-300 font-medium transition-colors">
                            立即注册
                        </a>
                    </p>
                </div>

                <!-- Demo Accounts -->
                <div class="mt-8 p-4 bg-gray-800 rounded-lg">
                    <h3 class="text-sm font-medium text-gray-300 mb-3">测试账户</h3>
                    <div class="space-y-2 text-xs text-gray-400">
                        <div class="flex justify-between items-center">
                            <span>用户名: demo</span>
                            <span>密码: 123456</span>
                            <button onclick="fillDemoAccount('demo', '123456')" 
                                    class="text-yellow-400 hover:text-yellow-300">使用</button>
                        </div>
                        <div class="flex justify-between items-center">
                            <span>邮箱: test@example.com</span>
                            <span>密码: 123456</span>
                            <button onclick="fillDemoAccount('test@example.com', '123456')" 
                                    class="text-yellow-400 hover:text-yellow-300">使用</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-black py-8 px-4 relative z-10">
        <div class="max-w-7xl mx-auto text-center">
            <p class="text-gray-500 text-sm">
                © 2025 Gallery. 保留所有权利。
            </p>
        </div>
    </footer>

    <script src="mode/auth.js"></script>
    <script>
        // 创建浮动粒子
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 30;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 4 + 4) + 's';
                particlesContainer.appendChild(particle);
            }
        }

        // 切换密码显示
        function togglePassword(inputId) {
            const input = document.getElementById(inputId);
            const button = input.nextElementSibling;
            
            if (input.type === 'password') {
                input.type = 'text';
                button.innerHTML = `
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"></path>
                    </svg>
                `;
            } else {
                input.type = 'password';
                button.innerHTML = `
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                `;
            }
        }

        // 填充测试账户
        function fillDemoAccount(username, password) {
            document.getElementById('login-email').value = username;
            document.getElementById('login-password').value = password;
            
            // 添加动画效果
            anime({
                targets: '#login-form input',
                scale: [1, 1.02, 1],
                duration: 300,
                easing: 'easeOutQuad'
            });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            createParticles();
            
            // 页面加载动画
            anime({
                targets: '.login-card',
                opacity: [0, 1],
                translateY: [50, 0],
                duration: 800,
                easing: 'easeOutExpo',
                delay: 200
            });

            // 表单字段动画
            anime({
                targets: '.form-input',
                opacity: [0, 1],
                translateX: [-30, 0],
                duration: 600,
                easing: 'easeOutExpo',
                delay: anime.stagger(100, {start: 400})
            });
        });
    </script>
</body>
</html>